<template>
  <div class="user-distri">
    <div class="user-distri-title">资源趋势</div>
    <el-tabs v-model="activeName" @tab-click="change">
      <el-tab-pane label="CPU（核）" name="first">
        <div id="user-distri-one" :style="{ width: '100%', height: '180px' }"></div>
      </el-tab-pane>
      <el-tab-pane label="内存（GB）" name="second">
        <div id="user-distri-two" :style="{ width: '100%', height: '180px' }"></div>
      </el-tab-pane>
      <el-tab-pane label="存储（TB）" name="third">
        <div id="user-distri-three" :style="{ width: '100%', height: '180px' }"></div>
      </el-tab-pane>
    </el-tabs>
    <!--  <div style="display: flex; justify-content: space-between">

    </div> -->
  </div>
</template>

<script>
  import request from "@/utils/request";
  var option = [null, null, null];
  export default {
    name: "userIndex",
    components: {},
    data() {
      return {
        flag: true,
        list: [],
        activeName: 'first',
        second: true,
        third: true,
        data: null,
      };
    },
    watch: {},
    created() {},
    mounted() {
      // this.getDone()
      // this.getTrend();
      // window.addEventListener("resize", () => {
      //   this.draw();
      // });
    },
    methods: {
      goMore() {
        this.$router.push({
          path: "/todoItem/done",
        });
      },
      getTrend() {
        request({
          url: "/homepage/user/resourceUpTrend?offset=7",
          method: "get",
        }).then((res) => {
          if (res.success) {
            this.line(res);
          }
        });
      },
      init(data) {
        this.data = data
        this.bar(data, 0)
      },
      change(e) {
        if (e.name == 'second' && this.second) {
          this.second = false
          this.bar(this.data, 1)
        }
        if (e.name == 'third' && this.third) {
          this.third = false
          this.bar(this.data, 2)
        }
        console.log(e.name);
      },
      bar(data, index) {
        let series = [{
          data: [],
          type: 'bar',
          label: {
            show: true,
            position: "inside",
          },
        }]
        if (index == 2) {
          series = [{
            name: '分布式存储(通用型)',
            type: 'bar',
            stack: 'Ad',
            emphasis: {
              focus: 'series'
            },
            label: {
              show: true,
              position: "inside",
            },
            data: []
          }, {
            name: '集中式存储(通用型)',
            type: 'bar',
            stack: 'Ad',
            emphasis: {
              focus: 'series'
            },
            label: {
              show: true,
              position: "inside",
            },
            data: []
          }, {
            name: '集中性存储(高性能)',
            type: 'bar',
            stack: 'Ad',
            emphasis: {
              focus: 'series'
            },
            label: {
              show: true,
              position: "inside",
            },
            data: []
          }, ]
        }
        data.trends.forEach(item => {
          if (index < 2) {
            if (data.data[item]) {
              if (!index) {
                series[0].data.push(data.data[item].vcpuCount)
              } else if (index == 1) {
                series[0].data.push(data.data[item].vmemoryCount)
              }
            } else {
              series[0].data.push(0)
            }
          } else {
            if (data.data[item]) {
              series[0].data.push(data.data[item].romFbsCount)
              series[1].data.push(data.data[item].romFcCount)
              series[2].data.push(data.data[item].romFcgxnCount)
            } else {
              series[0].data.push(0)
              series[1].data.push(0)
              series[2].data.push(0)
            }
          }
        })
        option[index] = {
          animationDuration: 5000,
          color: ["#2e76ff", "#45c6fc", "#ff6161", "#f5d900", "#7d7d7d"],
          xAxis: {
            type: 'category',
            data: data.trends
          },
          grid: {
            top:'15%',//距上边距
            left: "3%",
            right: "4%",
            bottom: "0%",
            containLabel: true,
          },
          tooltip: {
            trigger: "axis",
          },
          yAxis: {
            type: 'value'
          },
          series,
        };
        if(index==2){
         option[index].legend= {}
         option[index].grid.top= "16%"
        }else{
          option[index].grid.top= "5%"
        }
        this.draw(index)
      },
      draw(index) {
        if (!option[0]) {
          return;
        }
        this.flag = false;
        setTimeout(() => {
          this.flag = true;
          setTimeout(() => {
            if (!index) {
              let myChart1 = this.$echarts.init(
                document.getElementById("user-distri-one")
              );
              myChart1.setOption(option[0]);
            }
            if (index == 1) {
              let myChart2 = this.$echarts.init(
                document.getElementById("user-distri-two")
              );
              myChart2.setOption(option[1]);
            }
            if (index == 2) {
              let myChart3 = this.$echarts.init(
                document.getElementById("user-distri-three")
              );
              myChart3.setOption(option[2]);
            }



          }, 10);
        }, 10);
      },
    },
  };
</script>

<style scoped lang="scss">
  .user-distri {
    margin: 20px 0px 0 0px;
    background: white;
    border-radius: 6px;
    padding: 16px 16px 40px 16px;
    width: 48%;
    width: 700px;
    height: 284px;

    .user-distri-title {
      border-left: 3px solid rgb(138, 205, 255);
      font-weight: bold;
      padding-left: 10px;
    }
  }
</style>
